/*
 * @Author: Wxx
 * @Date: 2022-02-21 16:13:55
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-21 16:26:01
 * @Description:
 */
import React, { Component } from "react";

class Box extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (
      this.props.current === this.props.index ||
      nextProps.index === nextProps.current
    )
      return true;
    return false;
  }
  render() {
    console.log("render");
    return (
      <div
        style={{
          width: "100px",
          height: "100px",
          marginRight: "10px",
          border:
            this.props.current === this.props.index
              ? "1px solid red"
              : "1px solid #eee",
          float: "left",
          marginTop: "10px",
        }}
      ></div>
    );
  }
}

export default class APP extends Component {
  state = {
    current: "0",
    list: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
  };
  render() {
    return (
      <div>
        <input
          type="number"
          onChange={(e) => {
            this.setState({ current: e.target.value });
          }}
        />
        {this.state.list.map((item, index) => (
          <div key={index}>
            <Box current={this.state.current} index={item} />
          </div>
        ))}
      </div>
    );
  }
}
